<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-btn></my-btn>
    <my-btn></my-btn>
    <!-- <button @click="count+=1">点赞{{count}}</button>
    <button @click="count+=1">点赞{{count}}</button> -->
    
  </div>
  <script src="./js/vue.js"></script>
  <script>
    /*
        组件就是是实现应用中局部功能代码的集合
        作用:提高开发效率，简化代码，复用代码
        
        1.每个组件内部也都拥有vue的
          基本配置项(data、methods、watch、computed等)
        2.全局组件,可以在当前vue的html模板的任何位置都能使用
        3.组件内部的配置项是独立的数据，组件复用数据不会冲突
        4.template中一定要有一个根元素
    */

  // 语法：
  //  Vue.component(组件名,{
  //    template:`
  //     //html代码
  //    `,
  //    ...(配置项)
  //  })

  // 注册全局组件
   Vue.component('my-btn',{
    //  template的内容是html代码
     template:`
      <button @click="count+=1">点赞{{count}}</button>
      
     `,
     data(){
       return{
         count:0
       }
     }
   })

    const app = new Vue({
      el:"#app",
      data:function(){
        return{
          count:0
        }
      }
    })
  </script>
</body>
</html>